<template>
  <van-nav-bar
    border
    z-index="9"
    :fixed="fixed"
    :title="title"
    safe-area-inset-top
    :style="{height: '46px','background-color':backgroundColor}"
    @click-right="clickRight"
    placeholder
  >
    <template #right>
      <span v-if="rightText" class="text" :style="{ color: rightTextColor }">
        {{ rightText }}
      </span>
      <van-icon v-if="isRightIcon" color="#fff" name="search" size="18" />
    </template>
    <template #left>
      <div @click="back">
        <van-icon v-if="isLeftIcon" color="#ffffff" name="arrow-left" size="18" />
        <span v-if="leftText" class="text" :style="{ color: leftTextColor }">
          {{ leftText }}
        </span>
      </div>
    </template>
  </van-nav-bar>
</template>

<script setup>
// 顶部navbar组件 支持自定义左右侧插槽和标题
import { ref, reactive, onBeforeMount } from 'vue'
import router from '@/router/index'
import { useRouter } from 'vue-router'

const emit = defineEmits(['leftClick','rightBtn'])
const props = defineProps({
  fixed: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: () => {
      return useRouter().currentRoute.value.name || '标题'
    }
  },
  backgroundColor:{
			type:String,
			default:'#FFA631'
		},
  leftText: {
    type: String,
    default: ''
  },
  rightText: {
    type: String,
    default: ''
  },
  isLeftIcon: {
    type: Boolean,
    default: true,
    require: false
  },
  isRightIcon: {
    type: Boolean,
    default: false,
    require: false
  },
  rightTextColor: {
    type: String,
    default: ''
  },
  leftTextColor: {
    type: String,
    default: '#ffffff'
  },
  backPath: {
    type: String,
    default: ''
  },
  placeholder: {
    type: Boolean,
    default: true,
    require: false
  },
  isCustomLeftBtn: {
    type: Boolean,
    default: false
  }
})

const back = () => {
  if (props.isCustomLeftBtn) {
    emit('leftClick')
    return
  }
  if (props.backPath) {
    router.push({ path: props.backPath })
    return
  }
  router.go(-1)
}

const clickRight = ()=>{
  emit('rightBtn')
}

onBeforeMount(() => {
})
</script>
<style lang="scss" scoped>
.text {
  font-size: 32px;
  color: #fff;
}
:deep(.van-nav-bar){
  background-color: #4375E4 ;
}
:deep(.van-nav-bar__title) {
  color: #fff;
}
</style>
